/*
 * @Title: 活动-票务活动
 * @Created by: ycq
 */
<template>
	<view>
		<Banner />
		<view class='home-search' style="top: 0px;">
			<HeaderNavInput :config="navConfig"/>
		</view>
		<view class="hd-nav">
			<view class="nav-item" v-for="(item,index) in navData" :key='index' @click="toNav(item.url)">
				<image :src="item.img"></image>
				<text class="nav-text">{{item.title}}</text>
			</view>
		</view>
		<ShouyeOrder :pageType='5'/>
		<view class="hd-list">
			<view class="hd-item" v-for="(item,index) in hdData" :key='index'>
				<image :src="item.img"></image>
				<view class="item-right">
					<view class="item-title" >
						<text class="title-text">{{item.name}}</text>
						<text class="sc">收藏</text>
					</view>
					<text class="des">{{item.des}}</text>
						<text class="tip">{{item.tip}}</text>
					<view class="price-buy" style="">
						<text class="hd-price" v-if="item.hdPrice != item.price">￥{{item.hdPrice}}</text>
						<text class="price" :class="item.hdPrice != item.price?'price-no':''">￥{{item.price}}</text>
						<button class="buy">立即预定</button>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 19vw;"></view>
		<FootMenu navIndex='3'/>
		<top-view></top-view>
	</view>
</template>

<script>
	import Banner from '@/components/banner.vue'
	import ShouyeOrder from '@/components/shoyeOrder.vue'
	export default{
		data(){
			return{
				navConfig: {
					left:{
						leftExist:false,
						ifleftGoback:true,
						leftGobackColor:'#ffffff',
						leftGoback:'arrowleft',
						leftIconName:'',
						leftIcon:''
					},
					mid:{
						ifSearch:true,
						placeText:'请输入搜索内容'
						},
					right:{
						rightExist:true,
						rightIcon1:'/static/weater.png',
						rightIcon2:'',
						rightIconName1:'多云',
						rightIconName2:'',
						ifrightIcon2:false,
						ifrightIcon1:true,//是否显示第一个图标
					}
				},
				navData:[
					{
						title:'旅游团购',
						img:'/static/lytg.png',
						url:'crew/hdCrew'
					},
					{
						title:'旅游秒杀',
						img:'/static/lyms.png',
						url:'shop/miaosha'
					},
					{
						title:'旅游满减',
						img:'/static/lymj.png',
						url:''
					},
					{
						title:'积分兑换',
						img:'/static/jfdh.png',
						url:''
					}
				],
				hdData:[
					{
						name:'鞍山玉佛苑',
						level:4,
						des:'鞍山玉佛苑玉佛苑风景区鞍山玉佛苑是国家首批AAAA级旅游景区，位于辽...',
						price:298,
						hdPrice:198,
						img:'/static/banner.png',
						tip:'宗教寺庙'
					},
					{
						name:'法门寺',
						level:4,
						des:'法门寺又名“真身宝塔”，2004年被联合国教科文组织评为“世界第九大奇迹”',
						price:355,
						hdPrice:355,
						img:'/static/banner.png',
						tip:'宗教寺庙'
					},
					{
						name:'郑州少林寺',
						level:3,
						des:'少林寺是世界著名的佛教寺院，是汉传佛教的禅宗祖庭，在中国佛教史上占...  ',
						price:298,
						hdPrice:298,
						img:'/static/banner.png',
						tip:'宗教寺庙'
					},
					{
						name:'鞍山玉佛苑',
						level:4,
						des:'鞍山玉佛苑玉佛苑风景区鞍山玉佛苑是国家首批AAAA级旅游景区，位于辽...',
						price:198,
						hdPrice:88,
						img:'/static/banner.png',
						tip:'宗教寺庙'
					},
				]
			}
		},
		components:{
			Banner,
			ShouyeOrder
		},
		methods: {
			toNav(_url) {
				uni.navigateTo({
					url:_url
				})
			}
		},
	}
</script>

<style scoped>
	.hd-nav{
		width: 750upx;
		height: 220upx;
		background: #ffffff;
		display: flex;
		flex-direction: row;
	}
	.nav-item{
		width: 25%;
		height: 220upx;
		text-align: center;
	}
	.nav-item image{
		width: 86upx;
		height: 88upx;
		margin-top: 40upx;
		margin-left: auto;
		margin-right: auto;
	}
	.nav-text{
		width: 100%;
		display: block;
		font-size: 26upx;
		margin-top: 10upx;
		text-align: center;
	}
	
	
	.hd-list{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		display: table;
		height: auto;
	}
	.hd-item:nth-child(odd){
		margin-top: 20upx;
		width: 340upx;
		float: left;
	}
	.hd-item:nth-child(even){
		margin-top: 20upx;
		width: 340upx;
		float: right;
	}
	
	.hd-item:nth-child(1),.hd-item:last-child{
		height: 492upx;
	}
	.hd-item:nth-child(1) image,.hd-item:last-child image{
		border-radius: 10px 10px 0 0;
		width: 340upx;
		height: 270upx; 
	}
	.hd-item{
		height: 556upx;
	}
	.hd-item image{
		border-radius: 10px 10px 0 0;
		width: 340upx;
		height: 335upx;
	}
	.item-right{
		width: 340upx;
		height: 182upx;
		float: right;
	}
	.item-title{
		width: 100%;
		margin-top: 5upx;
		height: 50upx;
	}
	.title-text{
		font-size: 32upx;
		float: left;
		margin-left: 20upx;
	}
	.sc{
		float: right;
		font-size: 21upx;
		padding-top: 10upx;
		color: #666666;
	}
	.des{
		width: 100%;
		font-size: 25upx;
		color: #666666;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-left: 20upx;
		overflow: hidden;
	}
	
	.tip{
		font-size: 28upx;
		color: #54B0FF;
		width: 320upx;
		margin-left: 20upx;
		display: block;
	}
	.price-buy{
		width:320upx;height: 46upx; display:flex ;flex-direction: row;justify-content:space-between;margin-left: 20upx;
		
	}
	.price{
		font-size: 28upx;
		color: #DD540A;
		margin-top: 5upx;
		
	}
	.price-no{
		font-size: 28upx;
		color: #888888;
		text-decoration: line-through;
		margin-top: 5upx;
	}
	.hd-price{
		font-size: 28upx;
		color: #DD540A;
		margin-top: 5upx;
	}
	.buy{
		width: 127upx;
		height: 40upx;
		margin-top: 6upx;
		margin-left: 0;
		margin-right: 0;
		color: #FFFFFF;
		font-size: 22upx;
		text-align: center;
		padding-left: 0;
		padding-right: 0;
		line-height: 40upx;
		border-radius: 20upx;
		border: none;
		white-space: nowrap;  /*强制span不换行*/
		background: -webkit-linear-gradient(left, #54B0FF,#5773FE);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#5773FE);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#5773FE);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#5773FE);
		/* 标准的语法 */
	}
</style>
